<template>
  <div>
    <div v-if="listCTshow">
      <h3>选择题</h3>
      <div v-for="(CT, index) in listCT">
        <b
          ><label>{{ titlename(CT, index) }}</label></b
        >
        <ol type="A">
          <input
            type="checkbox"
            class="CTinput"
            value="A"
            @click="changeCT(CT.id, index + 1, 'A')"
          />
          <li class="CTli">
            {{ CT.a_option }}
          </li>
          <input
            type="checkbox"
            class="CTinput"
            value="B"
            @click="changeCT(CT.id, index + 1, 'B')"
          />
          <li class="CTli">
            {{ CT.b_option }}
          </li>
          <input
            type="checkbox"
            class="CTinput"
            value="C"
            @click="changeCT(CT.id, index + 1, 'C')"
          />
          <li class="CTli">
            {{ CT.c_option }}
          </li>
          <input
            type="checkbox"
            class="CTinput"
            value="D"
            @click="changeCT(CT.id, index + 1, 'D')"
          />
          <li class="CTli">
            {{ CT.d_option }}
          </li>
        </ol>
      </div>
    </div>

    <div v-if="listCLTshow">
      <h3>填空题</h3>
      <div v-for="(CLT, index) in listCLT">
        {{ titlename(CLT, index) }}
        <input type="text" placeholder="这里输入答案" v-model="CLT.value" />
      </div>
    </div>

    <div v-if="listAQTshow">
      <h3>解答题</h3>
      <div v-for="(AQT, index) in listAQT">
        {{ titlename(AQT, index) }}
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="AQT.value"
          @input="change($event)"
        >
        </el-input>
      </div>
    </div>

    <div v-if="listCSTshow">
      <h3>作文</h3>
      <div v-for="(CST, index) in listCST">
        {{ titlename(CST, index) }}
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="CST.value"
          show-word-limit
          @input="change($event)"
        >
        </el-input>
      </div>
    </div>

    <div>
      <br /><br />
      <el-button
        type="primary"
        @click="centerDialogVisible = true"
        style="margin-left:20%"
        >返回</el-button
      >
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <span>将直接返回作业页面,已完成的作业不会存档,是否返回?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="returnhomewk">确 定</el-button>
        </span>
      </el-dialog>

      <el-button
        type="primary"
        @click="centerDialog = true"
        style="margin-left:20%"
        >提交试卷</el-button
      >
      <el-dialog title="提示" :visible.sync="centerDialog" width="30%" center>
        <span>确认提交?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialog = false">取 消</el-button>
          <el-button type="primary" @click="submit_answers">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data() {
    return {
      //解答题input框绑定的
      answer_questions: "",
      //作文题input框绑定的
      composition: "",
      //答案
      str: "",
      //选择题
      listCT: {},
      //填空题
      listCLT: {},
      //解答题
      listAQT: {},
      //作文
      listCST: {},
      //选择/填空/解答/作文题是否显示
      listCTshow: false,
      listCLTshow: false,
      listAQTshow: false,
      listCSTshow: false,

      //选择,填空,解答,作文 ,答案
      ct: [],
      clt: [],
      aqt: [],
      cst: [],

      //选择/填空/解答/作文题答案集合
      listALLanswer: {
        listCTanswer: "",
        listCLTanswer: "",
        listAQTanswer: "",
        listCSTanswer: "",
        homeortestid: "",
        state: 2,
        userid: 0,
        //所有问题的题目id
        allquestionsid: {}
      },

      //返回 弹出框
      centerDialogVisible: false,
      //提交作业 弹出框
      centerDialog: false
    };
  },

  methods: {
    //根据homework传过来的作业id查询出作业
    fingAllTitle(id) {
      axios
        .get(commons.baseUrl + "student/findtestTitle?id=" + id)
        .then(res => {
          this.listALLanswer.allquestionsid = res.data.allquestionsid;
          if (res.data.listCT != null) {
            this.listCTshow = true;
            this.listCT = res.data.listCT;
          }
          if (res.data.listCLT != null) {
            this.listCLTshow = true;
            this.listCLT = res.data.listCLT;
            this.dynamic_Binding_model(res.data.listCLT, this.clt);
          }
          if (res.data.listAQT != null) {
            this.listAQTshow = true;
            this.listAQT = res.data.listAQT;
            this.dynamic_Binding_model(res.data.listAQT, this.aqt);
          }
          if (res.data.listCST != null) {
            this.listCSTshow = true;
            this.listCST = res.data.listCST;
            this.dynamic_Binding_model(res.data.listCST, this.cst);
          }
        });
    },
    //将写完的作业发回去
    sendHomework() {
      this.listALLanswer.homeortestid = this.$store.state.homeortestid;
      this.listALLanswer.userid = this.$store.state.userid;
      let ALLanswer = this.listALLanswer;

      axios
        .post(commons.baseUrl + "student/send", ALLanswer, {
          headers: { "Content-Type": "application/JSON" }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$router.push("/student/test");
          } else {
          }
        });
    },

    //返回homework.vue的按钮
    returnhomewk() {
      this.centerDialogVisible = false;
      this.$router.push("/student/test");
    },
    //选择题答案
    changeCT(id, indexid, answer) {
      //这道题有没有做过
      let indx = false;
      let tid = 0;
      let size = this.ct.length;
      for (let i = 0; i < size; i++) {
        if (indexid == this.ct[i].indexid) {
          for (let j = 0; j < this.ct[i].answer.length; j++) {
            if (answer == this.ct[i].answer[j]) {
              this.ct[i].answer.splice(j, 1);
              this.ct[i].answer.sort();
              console.log(this.ct);
              return;
            }
          }
          indx = true;
          tid = i;
        }
      }
      //没有做过
      if (indx == false) {
        let answers = this.newanswer().answers;
        answers.id = id;
        answers.indexid = indexid;
        answers.answer[0] = answer;
        this.ct[size] = answers;
      } //做过但是是新增答案
      else {
        let ansize = this.ct[tid].answer.length;

        this.ct[tid].answer[ansize] = answer;
        this.ct[tid].answer.sort();
      }
      console.log(this.ct);
    },
    //动态绑定v-model
    dynamic_Binding_model(obj, tit) {
      //动态绑定v-model()

      for (let x in obj) {
        obj[x].value = "";
      }
      //将解答题的id加到clt中
      for (let i = 0; i < obj.length; i++) {
        let answers = this.newanswer().answers;
        answers.id = obj[i].id;
        answers.indexid = i + 1;
        tit[i] = answers;
      }
    },
    //返回一个新的对象
    newanswer() {
      return {
        answers: {
          id: 0,
          indexid: 0,
          answer: []
        }
      };
    },
    //提交
    submit_answers() {
      //得到选择题input框里面的值并且添加到listALLanswer集合
      if ((this.listCTshow = true && this.ct.length != 0)) {
        for (let i = 0; i < this.listCT.length; i++) {
          //这个是判断这个题有没有做
          if (this.ct[i] == null) {
            this.str += i + 1 + ":" + "null";
          } else {
            this.ct[i].answer = this.ct[i].answer.join(",");
            this.str += i + 1 + ":" + this.ct[i].answer + " ";
          }
        }

        this.listALLanswer.listCTanswer = this.str;
      }
      //当有选择题但是一个都没有做时;
      if ((this.listCTshow = true && this.ct.length == 0)) {
        for (let i = 0; i < this.listCT.length; i++) {
          this.str += i + 1 + ":" + "null";
        }
        this.listALLanswer.listCTanswer = this.str;
      }

      //得到填空题input框里面的值并且添加到listALLanswer集合
      if ((this.listCLTshow = true)) {
        this.str = "";
        for (let i = 0; i < this.listCLT.length; i++) {
          this.clt[i].answer = this.listCLT[i].value;
          if (i + 1 == this.listCLT.length) {
            this.str += i + 1 + ":" + this.clt[i].answer + " ";
          } else {
            this.str += i + 1 + ":" + this.clt[i].answer + " ,";
          }
        }
        this.listALLanswer.listCLTanswer = this.str;
      }
      //得到解答题input框里面的值并且添加到listALLanswer集合
      if ((this.listAQTshow = true)) {
        this.str = "";
        for (let i = 0; i < this.listAQT.length; i++) {
          this.aqt[i].answer = this.listAQT[i].value;
          this.str += i + 1 + ":" + this.aqt[i].answer + " ";
        }
        this.listALLanswer.listAQTanswer = this.str;
      }
      //得到作文题input框里面的值并且添加到listALLanswer集合
      if ((this.listCSTshow = true)) {
        this.str = "";
        for (let i = 0; i < this.listCST.length; i++) {
          this.cst[i].answer = this.listCST[i].value;
          this.str += i + 1 + ":" + this.cst[i].answer + " ";
        }
        this.listALLanswer.listCSTanswer = this.str;
      }
      this.sendHomework();
    },
    //<el-input>框会出现无法输入消息的情况,这个方法绑定了@input,强制刷新
    change(e) {
      this.$forceUpdate();
    }
  },
  //生命周期函数,在页面创建成功时回调
  mounted() {
    this.fingAllTitle(this.$store.state.homeortestid);
  },
  //计算属性
  computed: {
    titlename() {
      return function(CT, index) {
        return index + 1 + " " + CT.title;
      };
    }
  }
};
</script>
<style scoped>
.btn {
  display: inline-block;
}
.CTinput {
  position: relative;
  left: -4.5%;
}
.CTli {
  margin-top: -21px;
}
</style>
